<template>
	<div class="con_left_view">
		<div class="left_top">在线预约</div>
		<div class="null">
			<div class="top_hx"></div>
		</div>
		<div class="yuyue">
			<div class="yuyueone">
				<div class="week updiv" :class="nowWeek" @click="switchWeek('nowWeek')">
					<span class="thisWeekSpn weektitle">本周</span>
					<span class="thisWeekSpnDate weektitle  weektitletime">07/02-07/16</span>
					<span class="trangle" :class="nowBlock"></span>
				</div>
				<div class="week downdiv" :class="nexWeek" @click="switchWeek('nexWeek')">
					<span class="nextWeekSpn weektitle">下周</span>
					<span class="nextWeekSpnDate weektitle weektitletime">07/19-07/23</span>
					<span class="trangle" :class="nextBlock"></span>
				</div>
			</div>
			<div class="thisWeekDay weekDay">
				<ul>
					<li v-for="(item,index) in dayMenu" :key='index' @click="switchDayMenu(index)" class="list_li" :class="item.weekColor" index="0">
						<div>{{item.dayName}}</div>
						<div class="weekDaytitle">{{item.dayTime}}</div>
						<span class="trangle onetrangle" :class="item.block"></span>
					</li>
				</ul>
			</div>

		</div>
		<div class="yuetime">
			<div class="forenoon yuetime_div">
				<div class="timetitle">上午</div>
				<div v-for="(item,index) in amTime" v-if="index < 3" @click="chooseConsultTime(item.amID)" class="timecont timeone" :class="item.weekColorSub" idindex="index">
					<span class="timecont_title">{{item.amtime}}</span>
					<span class="timecont_text">{{item.amStatus}}</span>
				</div>
			</div>
			<div class="yuetime-line"></div>
			<div class="afternoon yuetime_div">
				<div class="timetitle">下午</div>
				<div v-for="(item,index) in amTime" v-if="index > 2" @click="chooseConsultTime(item.amID)" class="timecont three" :class="item.weekColorSub" idindex="index+3">
					<span class="timecont_title">{{item.amtime}}</span>
					<span class="timecont_text">{{item.amStatus}}</span>
				</div>
			</div>
		</div>
		<div class="yue_btn">
			<span class="yuyue_ajax" :class="btnColor" id="0" @click="submitAppointment">提交预约</span>
		</div>
		<div class="yue_details">
			<div class="details_title">
				<span>我的近期预约</span>
				<span>如需修改或取消请点击下方详情，最晚可在咨询开始前24小时取消</span>
				<span class="details_title_all" @click="appointmentList">更多 ></span>
			</div>
			<div class="details_cont">
				<div class="details_cont_view">
					<div class="yuyue—com">
						<span style="float:left;margin-right:10px">1.</span>
						<span class='yuyue-time-length'>2018年7月14日 9:00 -10:00</span>
						<span style='margin-left:5px;float:left'>联系人:</span>
						<span class='yuyue-name-length'>张先生,</span>
						<span style='margin-left:5px'>电话:</span>137****2299
						<span class='consult-info-show'>待咨询</span>
						<!-- <span class='consult-info-show'>待咨询</span>
						<span class='consult-info-show'>咨询完成</span>
						<span class='consult-info-show'>咨询取消</span> -->
						<span class="yuyue_de" @click="lookAppointmentDetail(1)" >详情</span>
					</div>
				</div>
			</div>
		</div>
		<Modal
			v-model="appointmentStatus"
			title="预约详情"
			width='800px'
			footer-hide
			:closable="false"
			id="contect_detail">
			<div class="details">
				<div class="details_content">
					<div class="details_li frame">
						<span class="details_spanone">咨询时段：</span>
						<span class="details_spantwo timeInterval"></span>
					</div>
					<div class="details_li state">
						<span class="details_spanone">预约状态：</span>
						<span class="details_spantwo status"></span>
					</div>

					<div class="details_li name">
						<span class="details_spanone">联系人姓名：</span>
						<span class="details_spantwo customerName"></span>
					</div>
					<div class="details_li iphone">
						<span class="details_spanone">联系人电话：</span>
						<span class="details_spantwo customerPhone"></span>
					</div>
					<div class="details_li email">
						<span class="details_spanone">联系人邮箱：</span>
						<span class="details_spantwo customerEmail"></span>
					</div>
					<div class="describe">
						<span class="details_spanone">咨询描述：</span>
						<span class="details_text desContent"></span>
					</div>
					<div class="evaluate">
						<span class="details_spanone">评价信息：</span>
						<span class="details_text evaluateContent"></span>
					</div>

					<div class="details_btn">
						<div class="btn_quxiao" @click="closeAppointment">关闭</div>
						<div class="btn_div btn_xiugai" @click="editAppointment"  v-if="data.status ==='0' || data.status ==='1'">修改预约</div>
						<div class="btn_div btn_quxiaoyuyue" @click="cancelAppointment" v-if="data.status ==='0' || data.status ==='1' ">取消预约</div>
						<div class="btn_div btn_pjia" v-if="data.status ==='2'&& data.evaluateContent ==='' ">评价</div>
						<div class="btn_div btn_xgpjia" v-if="data.status ==='2'&& data.evaluateContent !=='' ">修改评价</div>
						<div style="clear: both;"></div>
					</div>
				</div>
			</div>
		</Modal>
		<Modal
			v-model="editAppointmentStatus"
			title="预约详情"
			width='500px'
			footer-hide
			:closable="false"
			id="popup_yuyue">
			<!-- <div class="popup-yuyue-div"> -->
				<div class="popup-yuyue-times">
					<span class="consultionTime">咨询时段：</span>
					<span class="time_duan">2018年7月5日  09:00 - 10:00</span>
				</div>
				<div class="popup-yuyue-input">
					<span class="consultion-descript"><span style="color:#E94747 ;">*</span>联系人姓名：</span>
					<input type="text" autocomplete="off" name="customerName" id="customerName" value="" maxlength="50" />
				</div>
				<div class="popup-yuyue-input">
					<span class="consultion-descript"><span style="color:#E94747 ;">*</span>联系人电话：</span>
					<input type="text" autocomplete="off" name="customerPhone" id="customerPhone" value="" maxlength="20" />
				</div>
				<div class="popup-yuyue-input">
					<span class="consultion-descript"><span style="color:#E94747 ;">*</span>联系人邮箱：</span>
					<input type="text" autocomplete="off" name="customerEmail" id="customerEmail" value="" maxlength="50" />
				</div>
				<div class="popup-yuyue-input">
					<span class="consultion-descript"><span style="color:#E94747 ;">*</span>咨询描述：</span>
					<textarea name="desContent" autocomplete="off" id="desContent" rows="" cols="" maxlength="500"></textarea>
				</div>
				<div class="popup-yuyue-btn">
					<div class="popup-yuyue-quxiao" @click="cancelEditAppointment">取消</div>
					<button class="popup-yuyue-tijiao" @click="submitEditAppointment" value="提交">提交</button>
				</div>
			<!-- </div> -->
		</Modal>
		<Modal
			v-model="submitSuccess"
			title="提示"
			width='498px'
			footer-hide
			:closable="false"
			id="submit_success">
			<div  class="popup-text">
				<div class="jie">
					<!-- <div>提交成功</div> -->
					<div>{{confirmValueOne}}，</div>
					<div>{{confirmValueTwo}}</div>
				</div>
				<button class="popup-yuyue-tijiao" @click="closeModel">确定</button>
				
			</div>
		</Modal>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				data:{
					evaluateContent:'',
					status:'0'
				},
				// 预约详情
				appointmentStatus:false,
				// 编辑预约详情
				editAppointmentStatus:false,
				// 提交成功
				submitSuccess:false,
				confirmValueOne:'',
				confirmValueTwo:'',
				// 当前日期
				chooseDateValue:'',
				nowWeek:{
					weekColor:true,
				},
				nowBlock:{
					block:true,
				},
				nexWeek:{
					weekColor:false,
				},
				nextBlock:{
					block:false,
				},
				dayMenu:[
					{
						dayName:'周一',
						dayTime:'11/19',
						dayId:'0',
						weekColor:{
							weekColor:true,
						},
						block:{
							block:true
						}
						
					},
					{
						dayName:'周二',
						dayTime:'11/20',
						dayId:'1',
						weekColor:{
							weekColor:false,
						},
						block:{
							block:false
						}
					},
					{
						dayName:'周三',
						dayTime:'11/21',
						dayId:'2',
						weekColor:{
							weekColor:false,
						},
						block:{
							block:false
						}
					},
					{
						dayName:'周四',
						dayTime:'11/22',
						dayId:'3',
						weekColor:{
							weekColor:false,
						},
						block:{
							block:false
						}
					},
					{
						dayName:'周五',
						dayTime:'11/23',
						dayId:'4',
						weekColor:{
							weekColor:false,
						},
						block:{
							block:false
						}
					}
				],
				// 上午时间
				amTime:[
					{
						amtime:'09:00 - 09:30',
						amStatus:'可预约',
						amID:'0',
						weekColorSub:{
							weekColor:false,
							disableStatus:false,
						},
					},
					{
						amtime:'10:00 - 10:30',
						amStatus:'不可预约',
						amID:'1',
						weekColorSub:{
							weekColor:false,
							disableStatus:true,
						},
					},
					{
						amtime:'11:00 - 11:30',
						amStatus:'预约满',
						amID:'2',
						weekColorSub:{
							weekColor:false,
							disableStatus:true,
						},
					},
// 				],
// 				// 下午时间
// 				pmTime:[
					{
						amtime:'14:00 - 14:30',
						amStatus:'可预约',
						amID:'3',
						weekColorSub:{
							weekColor:false,
							disableStatus:false,
						},
					},
					{
						amtime:'15:00 - 15:30',
						amStatus:'可预约',
						amID:'4',
						weekColorSub:{
							weekColor:false,
							disableStatus:false,
						},
					},
					{
						amtime:'16:00 - 16:30',
						amStatus:'预约满',
						amID:'5',
						weekColorSub:{
							weekColor:false,
							disableStatus:true,
						},
					},
					{
						amtime:'17:00 - 17:30',
						amStatus:'预约满',
						amID:'6',
						weekColorSub:{
							weekColor:false,
							disableStatus:true,
						},
					}
				],
				// 提交预约按钮默认是不可以点击状态
				btnColor:{
					btnColor:false,
				}
			};
		},
		methods: {
			// 我的预约列表
			appointmentList(){
				console.log("我的预约列表");
				this.$router.push({  //核心语句
					path:'/AppointmentList',   //跳转的路径
					query:{           //路由传参时push和query搭配使用 ，作用时传递参数
						// id:this.id ,  
					}
				})
			},
			// 切换本周和下周
			switchWeek(weekType){
				if(weekType === 'nowWeek'){
					this.nowWeek={
						weekColor:true,
					},
					this.nowBlock={
						block:true,
					},
					this.nexWeek={
						weekColor:false,
					}
					this.nextBlock={
						block:false,
					}
					this.chooseStatus(this.chooseDateValue);
				}else{
					this.nowWeek={
						weekColor:false,
					},
					this.nowBlock={
						block:false,
					},
					this.nexWeek={
						weekColor:true,
					},
					this.nextBlock={
						block:true,
					}
					this.chooseStatus(0);
				};
				for(let i in this.amTime){
					this.amTime[i].weekColorSub.weekColor = false;
				}
				this.btnColor={
					btnColor:false,
				}
			},
			// 切换到某一天的预约信息
			switchDayMenu(day){
				console.log("day="+day);
				for(let i in this.dayMenu){
					this.dayMenu[i].weekColor.weekColor = false;
					this.dayMenu[i].block.block = false;
				}
				this.dayMenu[day].weekColor.weekColor = true;
				this.dayMenu[day].block.block = true;
				for(let i in this.amTime){
					this.amTime[i].weekColorSub.weekColor = false;
				}
				this.btnColor={
					btnColor:false,
				}
			},
			// 选择咨询时间
			chooseConsultTime(timeIndex){
				for(let i in this.amTime){
					this.amTime[i].weekColorSub.weekColor = false;
				}
				if(this.amTime[timeIndex].weekColorSub.disableStatus === false){
					this.amTime[timeIndex].weekColorSub.weekColor = true;
					this.btnColor={
						btnColor:true,
					}
				}else{
					this.amTime[timeIndex].weekColorSub.weekColor = false;
					this.btnColor={
						btnColor:false,
					}
				}
			},
			// 当前选中状态
			chooseStatus(day){
				for(let i in this.dayMenu){
					this.dayMenu[i].weekColor.weekColor = false;
					this.dayMenu[i].block.block = false;
				}
				this.dayMenu[day].weekColor.weekColor = true;
				this.dayMenu[day].block.block = true;
				for(let i in this.amTime){
					this.amTime[i].weekColorSub.weekColor = false;
				}
				this.btnColor={
					btnColor:false,
				}
			},
			// 查看详情
			lookAppointmentDetail(ID){
				console.log('查看详情')
				this.appointmentStatus = true;
			},
			// 关闭预约详情
			closeAppointment(){
				setTimeout(() => {
					this.$Modal.remove();
					this.appointmentStatus = false
				}, 2000);
			},
			// 取消预约
			cancelAppointment(){
				this.confirmValueOne='最晚可在咨询开始前24小时取消，';
				this.confirmValueTwo='本次预约无法取消。';
				this.submitSuccess = true;
			},
			// 修改预约详情
			editAppointment(){
				console.log("编辑详情")
				setTimeout(() => {
					this.$Modal.remove();
					this.appointmentStatus = false;
					this.editAppointmentStatus = true;
				}, 2000);
			},
			// 取消编辑预约详情
			cancelEditAppointment(){
				this.$Modal.remove();
				this.editAppointmentStatus = false;
			},
			// 提交编辑预约详情
			submitEditAppointment(){
				setTimeout(() => {
					this.$Modal.remove();
					this.editAppointmentStatus = false;
					this.confirmValueOne='提交成功';
					this.confirmValueTwo='';
					this.submitSuccess = true;
				}, 2000);
			},
			// 提交成功确认
			closeModel(){
				this.$Modal.remove();
				this.submitSuccess = false;
			},
			// 评价
			remarkConsult(){
				this.remarkInfo='';
				this.remarkStatus= true;
			},
			// 编辑评价
			editRemark(){
				this.remarkInfo=this.data.evaluateContent;
				this.remarkStatus= true;
			},
			// 取消评价
			cancelRemark(){
				this.$Modal.remove();
				this.remarkStatus= false;
			},
			// 提交评价
			submitRemark(){
				setTimeout(() => {
					this.$Modal.remove();
					this.remarkStatus= false;
				}, 2000);
			},
			// 提交预约
			submitAppointment(){
				this.editAppointmentStatus = true;
			},
		},

		beforeMount: function() {
			// console.log("47")
			var now = new Date();
			var nowDay = now.getDay();
			this.chooseDateValue = parseInt(nowDay);
			console.log('今天是本周第' + nowDay + '天');
			this.chooseStatus(this.chooseDateValue);
		},
		mounted: function() {
			// console.log("7777777777")
		},
	}
</script>

<style>
	ul .trangle{
		bottom: -7px;
	}
	.yuetime .yuetime_div .disableStatus{
		background:rgb(236, 239, 247);
		color:#CCCCCC;
		
	}
</style>
